@import "common";

.swiper-container, .swiper-slide{
  height: 100%;
}

.page1{
  position:relative;background: url('/src/img/BG.jpg') no-repeat center center / cover;
  .feiji{position: absolute;width: 180/@rem;top: 90/@rem;left: 50%;margin-left: -120/@rem;}
  .earth{
    position: absolute;width:430/@rem;height: 430/@rem;top: 50%;left: 50%;margin-top: -215/@rem;margin-left: -215/@rem;
    &.earth-feiji{
      animation: key-feiji 6s linear infinite;display: none;z-index: 1;width:480/@rem;height: 480/@rem;margin-top: -240/@rem;margin-left: -240/@rem;background: url("/src/img/icon-feiji-big.png") no-repeat center center / cover;
    }
    .bg img{width: 100%;height: 100%;z-index: 2;position: relative;}
    .build{position: absolute;z-index: 1;
      img{width: 100%;display: block;}
      a{display: none;position: absolute;width: 64/@rem;height: 64/@rem;background: url("/src/img/icon-click.png") no-repeat center center / contain;z-index: 11;}
    }
    .build-1{width: 130/@rem;left: -100/@rem;top: 122/@rem;
      a{top: -15/@rem;left: 10/@rem}
    }
    .build-2{width: 170/@rem;left: -10/@rem;top: -80/@rem;
      a{top: -20/@rem;right: 15/@rem;}
    }
    .build-3{width: 170/@rem;right: 2/@rem;top: -56/@rem;
      a{top: -20/@rem;right: 15/@rem;}
    }
    .build-4{width: 90/@rem;right: -70/@rem;top: 135/@rem;
      a{top: -26/@rem;right: -26/@rem;}
    }
    .text{position: absolute;z-index: 3;width: 100%;left: 0;text-align: center;top: 254/@rem;
      img{display: block;}
      p{color: #fff;line-height: 30/@rem;font-size: 20/@rem;text-shadow: 0 2px 5px #333;}
      .tit{margin-top: 10/@rem;}
      .btn{width: 160/@rem;display: inline-block;}
    }
  }
}

.page2{
  .video-box{width: 100%;height: 100%;padding: 0;margin: 0;position: relative;
    video{width: 100%;height: 100%;}
  }

}

.page3{
  position:relative;background: url('/src/img/BG-2.jpg') no-repeat center center / cover;
  .figure{
    position: absolute;top: 87/@rem;width: 436/@rem;height:620/@rem;left: 50%;margin-left: -218/@rem;background: url("/src/img/icon-figure.png") no-repeat top center / contain;
    .info{
      position: absolute;width: 100%;left: 0;bottom: -200/@rem;text-align: center;
      img{display: block;}
      .btn{width: 280/@rem;display: inline-block;}
    }
    .text{
      position: absolute;width: 492/@rem;left: -50/@rem;top: 17/@rem;
    }
    .click{
      position: absolute;z-index: 3;width: 40/@rem;height: 40/@rem;background: url("/src/img/icon2-click.png") no-repeat center center / cover;
      &.one{left: 63/@rem;top: 194/@rem;}
      &.two{left: 228/@rem;top: 12/@rem;}
      &.thr{left: 336/@rem;top: 184/@rem;}
    }
  }
}

.page4{
  position:relative;background: url('/src/img/BG-2.jpg') no-repeat center center / cover;
  .clearfix{*zoom: 1;}
  .clearfix:before,
  .clearfix:after{display: table;line-height: 0;content: "";clear: both;}
  .img-flex{position: absolute;}
  .img-flex ul{font-size: 0;}
  .img-flex ul li{display: block;background-repeat: no-repeat;float: left;position: relative;}

  .foot{position: absolute;z-index: 9;text-align: center;bottom: 0;width: 100%;max-width: @sreen;padding: 16/@rem 0;
    img{width: 90/@rem;height: 90/@rem;display: inline-block;vertical-align: -18/@rem;}
    span{display: inline-block;color: #fff;font-size: 24/@rem;margin-left: 10/@rem;
      b{font-size: 30/@rem;color: #3affea;}
    }
  }
}

.pop-box{
  position: fixed;top:0;width: 100%;bottom: 0;max-width: @sreen;z-index: 99;
  .pop{
    position: relative;padding-top: 25/@rem;box-sizing: border-box;margin: 40/@rem 25/@rem 0;height: 635/@rem;background: url("/src/img/pop-bg.png") no-repeat top left / contain;
    .close{position: absolute;width: 66/@rem;height: 66/@rem;right: 0;bottom: 0;}
    .pop-cont{margin: 0 23/@rem;padding: 0 23/@rem;overflow: auto;height: 520/@rem;-webkit-overflow-scrolling:touch;}
    .icon-66{width: 70/@rem;img{display: block;}}
    .li{margin-top: 12/@rem;font-size: 24/@rem;display: none;}
    h2{color: #66ffef;font-size: inherit;line-height: 30/@rem;font-weight: normal;}
    .cont{
      margin-top: 56/@rem;color: #c1c1c0;
      .p{margin-top: 36/@rem;overflow: hidden;width: 100%;text-align: justify;
        label{width: 120/@rem;padding: 6/@rem 5/@rem;line-height: 26/@rem;box-sizing: border-box;text-align: center;float: left;border-radius: 30px;background-color: #c1c1c0;color: #000;}
        p{margin-left: 140/@rem;}
      }
    }
  }
}

@keyframes key-feiji {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg);
  }
}